<template>
  <div class="w-screen h-screen flex items-center justify-center bg-[#93defe]">
    <div class="main w-2/3 min-w-[1000px] flex justify-between">
      <img src="../assets/img/login-bg.png" alt="" />
      <div class="w-72 bg-white p-10 rounded-lg flex-shrink-0">
        <div
          class="w-32 h-32 rounded-full bg-white -mt-28 mx-auto border-4 border-solid border-[#93defe] text-sm flex justify-center items-center"
        >
          <User color="#93defe" class="w-20" />
        </div>
        <h3 class="text-center text-gray-500 pt-5">爱洽客服工作台登录</h3>
        <el-form ref="formRef" size="large" :model="formModel" :rules="formRules">
          <el-form-item prop="username">
            <el-input placeholder="登录名" v-model="formModel.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="密码" type="password" v-model="formModel.password" />
          </el-form-item>
          <el-form-item prop="auth">
            <el-input placeholder="验证码" v-model="formModel.auth" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="block w-full" @click="handleSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { ILoginFormField } from '@/manager/types'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { User } from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()

const formModel = reactive<ILoginFormField>({
  username: 'c',
  password: 'c',
  auth: 'c'
})

const formRules = reactive<FormRules<ILoginFormField>>({
  username: [
    {
      required: true
    }
  ],
  password: [
    {
      required: true
    }
  ],
  auth: [
    {
      required: true
    }
  ]
})

const router = useRouter()
const handleSubmit = async () => {
  await formRef.value?.validate(async (valid) => {
    if (!valid) return
    await router.replace('my')
  })
}
</script>

<style scoped></style>
